<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 受限组件，其实就是表单组件给到了一个值，在界面就无法被直接修改（一般就是可以和用户交互的哪些控件比如输入框、单选框、多选框、文本域）
      // 表单组件的值只能通过setState来修改
      class Hello extends React.Component {
        render(){
          return <input type="text" value='123'/>
        }
      }
      ReactDOM.render(<Hello />, document.getElementById("root"))
    </script>
    <!-- 双向数据绑定 -->
    <hr/>
    <div id="root1"></div>
    <script type="text/babel">
      class Hello extends React.Component {
        state = {
          name:'张三'
        }
        updateInfo = (e) => {
          console.log(this.state.name)
          this.setState({name:e.target.value})
        }
        render(){
          return <div>
            <input type="text" value={this.state.name} onChange={this.updateInfo}/>
            <p>{this.state.name}</p>
            </div>
        }
      }
      ReactDOM.render(<Hello />, document.getElementById("root1"))
    </script>
    <hr/>
    <script type="text/babel">
      
    </script>
  </body>
</html>
